<template>
  <div class='chart-container' :style='{ height: height, width: width }'>
    <a-spin :spinning='loading'>
      <!-- relative loading 占位 -->
      <div v-if='loading' :style="{ height : '100%', width : '100%' }"></div>
    </a-spin>
    <div v-if='!loading' :id='id' :class='className' :style="{ height : '100%', width : '100%'}" />
  </div>
</template>

<script>
import resize from './mixins/resize'

export default {
  mixins: [resize],
  components: {},
  props: {
    className: {
      type: String,
      default: 'pie-chart'
    },
    id: {
      type: String,
      default: 'pie-chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    xData: {
      type: Array,
      default () {
        return []
      }
    },
    multiple: {
      type: Boolean,
      default: false
    },
    legendList: {
      type: Array,
      default () {
        return []
      }
    },
    yData: {
      type: Array,
      default () {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: ''
    }
  },
  watch: {
    loading (val) {
      if (!val) {
        this.$nextTick(() => {
          this.initChart()
        })
      }
    }
  },
  computed: {
    option () {
      const _self = this
      return {
        color: [_self.color],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '100%'],
            top: '10%',
            data: _self.xData.map((item, index) => {
              return {
                name: item,
                value: _self.yData[index]
              }
            }),
            labelLine: {
              show: false
            },
            label: {
              show: false
            }
          }
        ]
      }
    }
  },
  data () {
    return {
      chart: null
    }
  },
  created () {
  },
  methods: {
    initChart () {
      const $el = document.getElementById(this.id)
      this.chart = this.$echarts.init($el, 'custom')
      const _self = this
      this.chart.setOption(_self.option)
      setTimeout(() => {
        this.resize()
      }, 600)
    }
  },
  mounted () {
  },
  updated () {
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  }
}
</script>
<style lang='less' scoped>
@import "./char";
</style>
